import React, {Component} from 'react'
import {Button, Col, Icon, message, Row} from 'antd'
import '../../less/index.less'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import {TwsReactMarkdownEditor, TwsReactMarkdownPreview} from 'tws-antd'
import {getUploadUrl} from '../../constant/upload-url'
import {STUDENT_MODIFY_ASSIGNMENT_STATUS} from '../../constant/notification-status'
import {FormattedMessage} from 'react-intl'
import {convertContent, getLangFromLocalStorage} from '../../constant/lang-util'
import QuizSuggestionBox from './quiz-suggestion-box'
import QuizNoteModal from './quiz-note-modal'
import {submitNote} from "../../actions/notes";

class AssignmentContentAndAnswerBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      assignmentAnswer: '',
      isQuizNoteModalVisible: false,
      noteContent: ''
    }
  }

  submitAnswer (quizId) {
    if (this.state.assignmentAnswer.trim() === '') {
      message.warning(convertContent('内容不能为空'))
    } else {
      const { taskId, assignmentId, programId } = this.props
      const notification = {programId, taskId, assignmentId, quizId, appType: 'subjectiveQuiz', type: STUDENT_MODIFY_ASSIGNMENT_STATUS}
      this.props.submitAnswer(this.state.assignmentAnswer, this.props.taskId, this.props.assignmentId, quizId, () => {
        this.props.addNotification(notification)
      })
    }
  }

  showModal = () => {
    this.setState({
      isQuizNoteModalVisible: true,
    });
  };

  handleOk = () => {
    this.setState({
      isQuizNoteModalVisible: false,
    });
    this.handleSubmit()
  };

  handleCancel = () => {
    this.setState({
      isQuizNoteModalVisible: false,
    });
  };

  handleSubmit = () => {
    const {noteContent} = this.state
    const {assignmentId, quizId, studentId, taskId} = this.props.reviewQuiz
    const {programId} = this.props.taskInfo
    const tutorId = this.props.user.userId
    const quizType = 'SUBJECTIVE_QUIZ'
    const values = {programId, taskId, assignmentId, quizId, studentId, tutorId, quizType, noteContent}
    this.props.submitNote(values)
  };

  handelChangeNote(value) {
    this.setState({
      noteContent: value
    })
  }

  render () {
    const quiz = this.props.quiz || {}
    const {answer, settings, reviewQuiz} = this.props
    const lang = getLangFromLocalStorage()
    const {isQuizNoteModalVisible} = this.state
    return (<div>
      <div className='margin-t-3'>
        <h3><FormattedMessage id='作业内容' /></h3>
        <div className='margin-t-2 mark-down-wrap'>
          <TwsReactMarkdownPreview source={quiz[`description_${lang}`] || quiz.description} />
        </div>
        <QuizSuggestionBox
          settings={settings}
          quiz={quiz}
          submit={this.props.submitQuizSuggestion}
        />
      </div>
      {answer
        ? <div className='margin-t-3'>
          <Row>
            <Col span={2}>
              <h3><FormattedMessage id='作业答案' /></h3>
            </Col>
            <Col span={4}>
              {
                reviewQuiz.id === null || this.props.taskId? '' :
                  <a onClick={this.showModal}>
                  <FormattedMessage id='添加备忘录' />
                </a>
              }

              <QuizNoteModal
                isQuizNoteModalVisible={isQuizNoteModalVisible}
                handleOk={this.handleOk}
                handleCancel={this.handleCancel}
                handelChangeNote={this.handelChangeNote.bind(this)}/>
            </Col>
          </Row>
          {
            reviewQuiz.id
            ? <span className='submit-time-box'>
              <Icon type='clock-circle' />
              {reviewQuiz.createTime}
            </span>
            : ''
          }
          <div className='margin-t-2 mark-down-wrap'>
            <TwsReactMarkdownPreview source={answer} />
          </div>
        </div>
        : <div className='margin-t-3'>
          <h3><FormattedMessage id='提交答案' /></h3>
          <TwsReactMarkdownEditor
            action={getUploadUrl(settings.appContextPath)}
            value=''
            onChange={assignmentAnswer => this.setState({ assignmentAnswer })} />
          <Button className='margin-t-2' onClick={this.submitAnswer.bind(this, quiz.id)} type='primary'><FormattedMessage id='提交' /></Button>
        </div>
      }

    </div>
    )
  }
}
const mapStateToProps = ({settings, user, taskInfo}) => ({
  settings, user, taskInfo
})

const mapDispatchToProps = dispatch => ({
  submitNote: quizNote => dispatch(submitNote(quizNote))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentContentAndAnswerBox))
